<template>
  <div class="comment-reply">
    <!-- 导航栏 -->
    <van-nav-bar :title="currentComment.reply_count + '条回复'">
      <van-icon slot="left" name="cross" @click="$emit('click-close')" />
    </van-nav-bar>
    <!-- /导航栏 -->

    <!-- 当前评论项 -->
    <comment-item :item="currentComment"></comment-item>
    <!-- /当前评论项 -->

    <van-cell title="所有回复" />

    <!-- 评论的回复列表 -->
    <comment-list
      :source-id="currentComment.com_id"
      :list="comment_list"
      type="c"
    />
    <!-- /评论的回复列表 -->

    <!-- 底部 -->
    <div class="reply_bottom">
      <van-button type="primary" plain class="btn" @click="isPostShowTwo = true"
        >写评论</van-button
      >
    </div>
    <van-popup v-model="isPostShowTwo" position="bottom">
      <comment-post
        :target="currentComment.com_id"
        :list="comment_list"
        @update-count="currentComment.reply_count++"
        :art_id="articleId"
        @close="isPostShowTwo = false"
      />
    </van-popup>
    <!-- /底部 -->
  </div>
</template>

<script>
import CommentPost from "./comment-post.vue";
import CommentItem from "./comment-item.vue";
import CommentList from "./comment-list.vue";

export default {
  name: "CommentReply",
  components: { CommentItem, CommentList, CommentPost },
  props: {
    currentComment: {
      type: Object,
      required: true
    },
    articleId: {
      type: [String, Number, Object],
      required: true
    }
  },
  data() {
    return {
      comment_list: [],
      isPostShowTwo: false
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style scoped>
.reply_bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 80px;
  text-align: center;
  border-top: 1px solid #ccc;
  padding: 20px 0;
}
.btn {
  padding: 0px 190px;
  border: 1px solid #ccc;
  color: #ccc;
  font-size: 16px;
}
</style>
